<template>
  <div class="picture" :class="{ mobile: settingStore.isMobile }">
    <TopView name="message" title="Footprints in Light" msg="人生最大的风险就是不冒任何风险！" bgimg="picture" />
    <!-- <div class="head">
      <div class="title">个人相册</div>
      <div class="desc">人生最大的风险就是不冒任何风险！</div>
    </div> -->
    <el-card class="container mx-auto max-w-screen-xl mt-5">
      <router-view />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useSettingsStore } from "@/store/modules/settings"
import TopView from "@/components/TopView/index.vue"
const settingStore = useSettingsStore()
</script>

<style scoped lang="scss">
.picture {
  width: 100%;
  height: 100vh;
  min-height: calc(100vh);
  font-size: 20px;
  display: flex;
  align-items: center;
  &.mobile {
    font-size: 14px;
  }
}
</style>
